<html>
  <head>
    <meta name="layout" content="site">
    <style type="text/css">
      #content {width:620px; margin:0px auto;}
      #desc {margin:10px; float:left; font-family: Arial, sans-serif; font-size: 12px;}
    </style>
  </head>
  <body>
    <script type="text/javascript">
        $(document).ready(function() {
            //Thumbnailer.config.shaderOpacity = 1;
            var tn1 = $('.mygallery').tn3({
                skinDir:"skins",
                imageClick:"fullscreen",
                image:{
                    maxZoom:1.5,
                    crop:true,
                    clickEvent:"dblclick",
                    transitions:[{
                            type:"blinds"
                        },{
                            type:"grid"
                        },{
                            type:"grid",
                            duration:460,
                            easing:"easeInQuad",
                            gridX:1,
                            gridY:8,
                            // flat, diagonal, circle, random
                            sort:"random",
                            sortReverse:false,
                            diagonalStart:"bl",
                            // fade, scale
                            method:"scale",
                            partDuration:360,
                            partEasing:"easeOutSine",
                            partDirection:"left"
                        }]
                }
            });
        });
    </script>
    <div class="mainbar" style="margin-left: 160px">
      <h2>${produto}</h2>
      <div class="mygallery">
        <div class="tn3 album">
          <ol>
            <g:each in="${produtoList}">
              <li>
                <div class="tn3 description"><p style="padding: 0; margin: 0; font-size: 14px">${it.descricao}</p></div>
                <a href="${createLink(controller:'fotoProduto', action:'view', id:it.id)}">
                  <img src="${createLink(controller:'fotoProduto', action:'view', id:it.id)}">
                </a>
              </li>
            </g:each>
          </ol>
        </div>
      </div>
    </div>
  </body>
</html>